<template>
	<!-- 悬赏白条 -->
	<view class="layout">
		<view class="Top">
			<view class="available">
				<text>当前可用额度（元）</text>
				<text class="keyongjine">1,098.38</text>
			</view>
			<view class="Bao">
				<view class="Used">
					<text>已使用额度</text>
					<text class="jine">1,059.33</text>
				</view>
				<view class="Total">
					<text>总额度</text>
					<text class="jine">5000.00</text>
				</view>
				<view class="debt">
					<view class="debtTopBao">
						<text>欠款</text>
						<image class="wenhao" src="../../../static/user/u2687.png" mode=""></image>
					</view>
					<text class="jine">300.00</text>
				</view>
			</view>
		</view>
		<view class="Center">
			<text class="jiaoyi">交易记录</text>
			<text class="chakan">查看更多></text>
		</view>
		<view class="Buttom">
			<view class="row">
				<view class="rowLeft">
					<text>平台授信5000元额度</text>
					<text class="time">2019-12-09 &nbsp;&nbsp;21:54:32</text>
				</view>
				<view class="rowRight">
					<text class="jiaqian">+5000.00</text>
				</view>
			</view>
			<view class="row">
				<view class="rowLeft">
					<text>Java工程师悬赏岗位支出</text>
					<text class="time">2019-11-09 &nbsp;&nbsp;21:54:32</text>
				</view>
				<view class="rowRight">
					<text class="jianqian">-300.00</text>
				</view>
			</view>
			<view class="row">
				<view class="rowLeft">
					<text>前端工程师悬赏岗位申请退款</text>
					<text class="time">2019-12-09 &nbsp;&nbsp;21:54:32</text>
				</view>
				<view class="rowRight">
					<text class="jiaqian">+1000.00</text>
				</view>
			</view>
			<view class="row">
				<view class="rowLeft">
					<text>平台临时调整授信2000元额度</text>
					<text class="time">2019-11-09 &nbsp;&nbsp;21:54:32</text>
				</view>
				<view class="rowRight">
					<text class="jiaqian">+2000.00</text>
				</view>
			</view>
			<view class="row">
				<view class="rowLeft">
					<text>运营岗位悬赏岗位支出</text>
					<text class="time">2019-11-09 &nbsp;&nbsp;21:54:32</text>
				</view>
				<view class="rowRight">
					<text class="jianqian">-500.00</text>
				</view>
			</view>
			<view class="row">
				<view class="rowLeft">
					<text>运营岗位悬赏岗位支出</text>
					<text class="time">2019-11-09 &nbsp;&nbsp;21:54:32</text>
				</view>
				<view class="rowRight">
					<text class="jianqian">-500.00</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	.layout{
		padding: 30rpx;
		.Top{
			height: 25vh;
			border-radius: 15rpx;
			padding: 30rpx;
			background: #1976FF;
			.available{
				margin-top: 45rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				height: 120rpx;
				color: white;
				.keyongjine{
					font-weight: bold;
					font-size: 60rpx;
				}
			}
			.Bao{
				margin-top: 40rpx;
				display: flex;
				color: #7EB5FF;
				font-size: 25rpx;
				.Used,.Total,.debt{
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					padding-right: 40rpx;
					.jine{
						font-size: 40rpx;
						font-weight: bold;
					}
				}
				.debtTopBao{
					display: flex;
					align-items: center;
					justify-content: space-around;
					width: 100rpx;
					.wenhao{
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
		.Center{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 60rpx;
			padding: 20rpx 0;
			.jiaoyi{
				font-size: 30rpx;
			}
			.chakan{
				font-size: 25rpx;
			}
		}
		.Buttom{
			.row{
				border-bottom: 1px solid #eee;
				height: 110rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 34rpx;
				padding: 10rpx 5rpx 0 0;
				.rowLeft{
					display: flex;
					flex-direction: column;
					font-weight: bold;
					.time{
						font-size: 25rpx;
						color: #999;
					}
				}
				.rowRight{
					display: flex;
					align-items: center;
					font-size: 35rpx;
					.jianqian{
						color: #6799D1;
					}
					.jiaqian{
						color: #FA6349;
					}
				}
			}
		}
	}
</style>
